<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .black {
        background-color: rgb(228, 217, 217);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <table border="1" style="width: 500px; text-align: center">
        <thead>
          <th>选中</th>
          <th>图片</th>
          <th>单价</th>
          <th>个数</th>
          <th>小计</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr
            v-for="item in fruits"
            :key="item.id"
            :class="{black:item.isChecked}"
          >
            <td><input type="checkbox" v-model="item.isChecked" /></td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
              <span
                ><button :disabled="item.count <=1" @click="sub(item.id)">
                  -
                </button></span
              >
              {{item.count}}
              <span><button @click="add(item.id)">+</button></span>
            </td>
            <td>{{item.price * item.count}}</td>
            <td><button @click="del(item.id)">删除</button></td>
          </tr>
        </tbody>
        <tfoot>
          <div class="total">
            <tr>
              <td colspan="1">
                <span style="text-align: left"
                  ><input type="checkbox" v-model="isAll" />全选</span
                >
              </td>
              <td colspan="5">
                <span>合计：{{sumPrice}}</span>
                <span
                  ><button @click="result()">结算（{{sumCount}}）</button></span
                >
              </td>
            </tr>
          </div>
        </tfoot>
      </table>
    </div>
  </body>

  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <script>
    const defaultArr = [
      { id: "1", name: "火龙果", price: 6, count: 1, isChecked: true },
      { id: "2", name: "西瓜", price: 8, count: 1, isChecked: false },
      { id: "3", name: "葡萄", price: 10, count: 1, isChecked: false },
      { id: "4", name: "香蕉", price: 12, count: 1, isChecked: false },
      { id: "5", name: "苹果", price: 10, count: 1, isChecked: false },
    ];
    const app = new Vue({
      el: "#app",
      data: {
        fruits: JSON.parse(localStorage.getItem("list"))|| defaultArr,
      },
      methods: {
        add(id) {
          const fruit = this.fruits.find((item) => item.id === id);
          fruit.count++;
        },
        sub(id) {
          const fruit = this.fruits.find((item) => item.id === id);
          fruit.count--;
        },
        del(id) {
          this.fruits = this.fruits.filter((item) => item.id !== id);
        },
      },
      computed: {
        sumPrice() {
          return this.fruits.reduce((sum, item) => {
            if (item.isChecked) {
              return sum + item.count * item.price;
            } else {
              return sum;
            }
          }, 0);
        },
        sumCount() {
          return this.fruits.reduce((sum, item) => {
            if (item.isChecked) {
              return sum + 1;
            } else {
              return sum;
            }
          }, 0);
        },
        isAll: {
          get() {
            return this.fruits.every((item) => item.isChecked);
          },
          set(value) {
            console.log(value);

            this.fruits.forEach((item) => (item.isChecked = value));
          },
        },
      },
      watch: {
        fruits: {
          deep: true,
          handler(newValue) {
            console.log(newValue);
            localStorage.setItem("list", JSON.stringify(newValue));
          },
        },
      },
    });
  </script>
</html>
